<template>
    <div>
        <div style="margin-top: 10px;display: flex;justify-content: center;">
            <el-input @keydown.enter.native="doSearch" style="width: 400px;margin-right: 8px" v-model="keywords"
                      prefix-icon="el-icon-search" placeholder="通过用户名搜索用户">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
            <el-button type="success" icon="el-icon-plus" @click="dialog= true">注册新成员</el-button>
        </div>
        <div style="margin-top: 18px;display: flex;flex-wrap: wrap;justify-content: space-around;">
            <el-card class="box-card-hr" v-for="(hr,index) in hrs" :key="index">
                <div slot="header" class="clearfix">
                    <span>{{hr.name}}</span>
                    <el-button @click="deleteHr(hr)" style="float: right; padding: 3px 0;color: red" type="text"
                               icon="el-icon-delete"></el-button>
                </div>
                <div>
                    <div class="img-container">
                        <img :src="hr.userface" :alt="hr.name" :title="hr.name" class="userface-img">
                    </div>
                    <div class="userinfo-container">
                        <div>用户名：{{hr.name}}</div>
                        <div>手机：{{hr.phone}}</div>
                        <div>电话：{{hr.telephone}}</div>
                        <div>地址：{{hr.address}}</div>
                        <div>用户状态：
                            <el-switch
                                    @change="enabledChange(hr)"
                                    v-model="hr.enabled"
                                    active-text="启用"
                                    inactive-text="禁用">
                            </el-switch>
                        </div>
                        <div>用户角色：
                            <el-tag size="small" style="margin-right: 3px;" type="success"
                                    v-for="(role,index) in hr.roles" :key="index">{{role.namezh}}
                            </el-tag>
                            <el-popover
                                    @show="showPop(hr)"
                                    @hide="hidePop(hr)"
                                    placement="right"
                                    title="角色列表"
                                    width="200"
                                    trigger="click"
                            >
                                <el-select multiple v-model="selectedRoles" placeholder="请选择">
                                    <el-option
                                            v-for="(r,indexk) in allRoles"
                                            :key="indexk"
                                            :label="r.namezh"
                                            :value="r.id">
                                    </el-option>
                                </el-select>
                                <el-button slot="reference" size="small" icon="el-icon-more" type="text"></el-button>
                            </el-popover>
                        </div>
                        <div>备注：{{hr.remark}}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <el-drawer
                title="注册新成员"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="rtl"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div style="margin-left: 10px;">
                <el-form :rules="rules" ref="hrForm" :model="hr" :label-width="formLabelWidth"
                         :label-position="labelPosition">
                    <el-form-item prop="name" label="姓名">
                        <el-input style="width: 250px" v-model="hr.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone" label="手机">
                        <el-input style="width: 250px" v-model="hr.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="telephone" label="电话">
                        <el-input style="width: 250px" v-model="hr.telephone"></el-input>
                    </el-form-item>
                    <el-form-item prop="address" label="地址">
                        <el-input style="width: 250px" v-model="hr.address"></el-input>
                    </el-form-item>
                    <el-form-item prop="username" label="用户名">
                        <el-input style="width: 250px" v-model="hr.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input style="width: 250px" type="password" v-model="hr.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="remark" label="备注">
                        <el-input
                                style="width: 250px"
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="hr.remark">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div style="padding-left: 30px;">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="doAddHr">{{ loading ? '提交中 ...' : '添 加' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                keywords: '',
                hrs: [],
                hr: {
                    name: '',
                    phone: '',
                    telephone: '',
                    address: '',
                    username:'',
                    password:'',
                    remark: ''
                },
                loading:false,
                labelPosition: 'right',
                formLabelWidth: '80px',
                allRoles: [],
                selectedRoles: [],
                dialog: false,
                rules: {
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机', trigger: 'blur'}],
                    telephone: [{required: true, message: '请输入电话', trigger: 'blur'}],
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                },
            }
        },
        mounted() {
            this.initHrs();
        },
        methods: {
            resetForm() {
                this.resetFormWithName('hrForm')
            },
            resetFormWithName(formName) {
                this.$refs[formName].resetFields();
            },
            doAddHr() {
                this.$refs.hrForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.postRequest("/system/hr/", this.hr).then(resp => {
                            if (resp) {
                                this.initHrs();
                            }
                        });
                        this.dialog = false;
                        this.loading = false;
                    }
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.resetForm();
                this.cancelForm();
            },
            showAddView() {

            },
            deleteHr(hr) {
                this.$confirm('此操作将永久删除【' + hr.name + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/hr/" + hr.id).then(resp => {
                        if (resp) {
                            this.initAllRoles();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doSearch() {
                this.initHrs();
            },
            hidePop(hr) {
                let roles = Object.assign([], hr.roles);
                let flag = false;
                if (roles.length != this.selectedRoles.length) {
                    flag = true;
                } else {
                    for (let i = 0; i < roles.length; i++) {
                        let role = roles[i];
                        for (let j = 0; j < this.selectedRoles.length; j++) {
                            let sr = this.selectedRoles[j];
                            if (role.id == sr) {
                                roles.splice(i, 1);
                                i--;
                                break;
                            }
                        }
                    }
                    if (roles.length != 0) {
                        flag = true;
                    }
                }
                if (flag) {
                    let url = '/system/hr/role?hrid=' + hr.id;
                    this.selectedRoles.forEach(sr => {
                        url += '&rids=' + sr;
                    });
                    this.putRequest(url).then(resp => {
                        if (resp) {
                            this.initHrs();
                        }
                    })
                }
            },
            showPop(hr) {
                let roles = hr.roles;
                console.log(roles);
                this.selectedRoles = [];
                roles.forEach(r => {
                    this.selectedRoles.push(r.id);
                });
                this.initAllRoles();
            },
            initAllRoles() {
                this.getRequest("/system/hr/roles").then(resp => {
                    if (resp) {
                        this.allRoles = resp;
                    }
                })
            },
            enabledChange(hr) {
                delete hr.roles;
                this.putRequest("/system/hr/", hr).then(resp => {
                    if (resp) {
                        this.initHrs();
                    }
                })
            },
            initHrs() {
                this.getRequest("/system/hr/?keywords=" + this.keywords).then(resp => {
                    this.hrs = resp;
                })
            }
        }
    }
</script>

<style>
    .userinfo-container div {
        font-size: 14px;
        color: #2f72ff;
    }

    .userinfo-container {
        margin-top: 20px;
    }

    .img-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .userface-img {
        width: 72px;
        height: 72px;
        border-radius: 72px;
    }

    .box-card-hr {
        width: 350px;
        margin-bottom: 18px;
    }
</style>